<script setup lang="ts">
import { ref } from "vue";
import ReCol from "@/components/ReCol";
import { redemptionRules } from "../utils/rule";
import { conditionsRedemptionProps } from "../utils/types";
import type { FormInstance } from 'element-plus'
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { regionData } from "@/utils/chinaArea";
import { tags_list,tags_add } from "@/api/tag"
const props = withDefaults(defineProps<conditionsRedemptionProps>(), {
  formInline: () => ({
    address: "" ,
    // industryOptions: [],
    industry: null,
    enterpriseMin: null,
    enterpriseMax: null,
    benefitMin: null,
    benefitMax: null,
    range: "",
    num: null,
    // sortMode: 1,
    labelId: "",
    page:"",
    labelName:""
  })
});
function getTagsList(){
  tags_list({
    key:"",
    page:1,
    pagesize:99,
    status: -1
  }).then(res=>{
    if(res.code == 1000){
      labelOptions.value = res.data
    }
  })
}
getTagsList()
const labelOptions = ref([])
const labelName = ref()
const onLabelConfirm = () => {
  if (labelName.value) {
    tags_add({
      name: labelName.value,
      sort: 1,
      status: 0
    }).then(res=>{
      if(res.code == 1000){
        getTagsList()
        labelName.value = ''
      }
    })
  }
}

const ruleFormRef = ref<FormInstance>();
const newFormInline = ref(props.formInline);

// 重置条件
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  newFormInline.value.num = null
  formEl.resetFields()
}
const handleChange = e => {
  newFormInline.value.address = e?.join("/");
};
function getRef() {
  return ruleFormRef.value;
}
function change(e){
  newFormInline.value.labelName = labelOptions.value.find(i=>i.id === e)?.name
}
defineExpose({ getRef });
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="newFormInline"
      :rules="redemptionRules"
      label-width="90px"
    >
      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">客户参数</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="所在地区:" prop="city">
              <el-cascader
                placeholder="请选择"
                :props="{ value: 'label' }"
                @change="handleChange"
                :options="regionData"
                class="w-full"
                clearable
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="所属行业:" prop="industry">
              <!-- <el-select
                v-model="newFormInline.industry"
                placeholder="请选择"
                class="w-full"
                clearable
              >
                <el-option
                  v-for="(item, index) in newFormInline.industryOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> -->
              <el-input
                class="w-full"
                v-model="newFormInline.industry"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="企业评估:">
              <div class="flex">
                <el-form-item prop="enterpriseMin">
                  <el-input
                    v-model="newFormInline.enterpriseMin"
                    placeholder="最小值"
                    clearable
                  ><template #append>万</template></el-input>
                </el-form-item>
                <div class="text-center pl-1 pr-1">至</div>
                <el-form-item prop="enterpriseMax">
                  <el-input
                    v-model="newFormInline.enterpriseMax"
                    placeholder="最大值"
                    clearable
                  ><template #append>万</template></el-input>
                </el-form-item>
              </div>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="效益评估:">
              <div class="flex">
                <el-form-item prop="benefitMin">
                  <el-input
                    v-model="newFormInline.benefitMin"
                    placeholder="最小值"
                    clearable
                  ><template #append>万</template></el-input>
                </el-form-item>
                <div class="text-center pl-1 pr-1">至</div>
                <el-form-item prop="benefitMax">
                  <el-input
                    v-model="newFormInline.benefitMax"
                    placeholder="最大值"
                    clearable
                  ><template #append>万</template></el-input>
                </el-form-item>
              </div>
            </el-form-item>
          </re-col>
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="经营范围:" prop="range">
              <el-input
                class="w-full"
                v-model="newFormInline.range"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </re-col>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">查询参数</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="兑领条数:" prop="num">
              <el-input
                type="number"
                class="w-full"
                v-model="newFormInline.num"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </re-col>
          <!-- <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="排序方式:" prop="sortMode">
              <el-radio-group v-model="newFormInline.sortMode">
                <el-radio :value="1">乱序</el-radio>
                <el-radio :value="2">顺序</el-radio>
              </el-radio-group>
            </el-form-item>
          </re-col> -->
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="第几页:" prop="page">
              <el-input
                type="number"
                class="w-full"
                v-model="newFormInline.page"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </re-col>
           <el-alert title="注意: 单次操作, 最大允许兑领10万条数据。第几页: 相同客户参数及兑领条数情况下，查询游标" type="info" show-icon  :closable="false"/>
        </el-row>
      </div>

      <div class="dialog">
        <div class="title">
          <div class="line"></div>
          <div class="bt">标签</div>
        </div>

        <el-row :gutter="20">
          <re-col :value="12" :xs="24" :sm="24">
            <el-form-item label="客户标签:" prop="labelId">
              <el-select
                v-model="newFormInline.labelId"
                placeholder="请选择"
                class="w-full"
                clearable
                @change="change"
              >
                <el-option
                  v-for="(item, index) in labelOptions"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
                <template #footer>
                  <div class="flex">
                    <el-input
                      v-model="labelName"
                      placeholder="输入新增项"
                      class="mr-2"
                    />
                    <el-button type="primary" @click="onLabelConfirm">
                      确认新增
                    </el-button>
                  </div>
                </template>
              </el-select>
            </el-form-item>
          </re-col>
        </el-row>
      </div>
    </el-form>

    <el-button type="info" :icon="useRenderIcon('ri:brush-2-line')" plain @click="resetForm(ruleFormRef)">重置条件</el-button>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0 6px;
}

.dialog {
  width: 100%;
  background-color: #f3f6f9;
  padding: 0 20px;
  margin-bottom: 15px;
  border-radius: 7px;
  padding-bottom: 10px;

  .title {
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 50px;

    .line {
      width: 4px;
      height: 15px;
      border-radius: 5px;
      background-color: var(--pure-theme-menu-active-before);
      margin-right: 10px;
    }

    .bt{
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
